<template>
  <div id="poster">
    <div class="left">
      <el-upload
        ref="myupload"
        class="avatar-uploader"
        drag
        :action="updateurl"
        :auto-upload="false"
        :show-file-list="false"
        :on-change="imgchange"
        :multiple="false"
      >
        <i class="el-icon-upload" />
        <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
        <div slot="tip" style="text-align: center;" class="el-upload__tip">只能上传jpg/png文件，且不超过2Mb</div>
      </el-upload>
      <el-button type="primary" style="display:block;margin: 20px auto;" @click="submitupload">确定上传</el-button>
    </div>
    <div class="right">
      <img
        :src="imgurl"
        height="400px"
        width="200px"
      >
    </div>
  </div>
</template>

<script>
export default {
  name: 'Poster',
  inject: ['reload'],
  data() {
    return {
      updateurl: '/online/upposter',
      imgurl: this.imgurl + 'group1/M00/00/00/rBUAAl5RDWeASWxzAALAMh1sF-Y768.jpg?' + new Date().getTime(),
      filetype: [
        'image/jpeg',
        'image/png'
      ],
      maxsize: 2 * 1024 * 1024,
      myfile: ''
    }
  },
  methods: {
    imgchange(file, fileList) {
      if (file.size > this.maxsize) {
        this.$alert('图片超过2MB')
      } else if (this.filetype.indexOf(file.raw.type) === -1) {
        this.$alert('图片只能是jpg或者png格式')
      } else {
        this.imgurl = URL.createObjectURL(file.raw)
        this.myfile = file.raw
      }
    },
    submitupload() {
      if (this.myfile === '') {
        this.$alert('未选择任何图片')
      } else {
        this.post(this.updateurl, null, result => {
          console.log(result)
          this.reload()
        }, { file: this.myfile })
      }
    }
  }
}
</script>
<style scoped>
  #poster{
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
  }
  #poster>.left {

  }
  .avatar {
    width: 100%;
    height: 100%;
    display: block;
  }
</style>
